<template>
	<view style="position: fixed; width: 100%; height: 100%;">
		<view style="text-align:center">
		    <image :src="urls[0]" @click="clk(0)" class="myimg2"></image> 
		<!-- <image :src="urls[1]" @click="clk(1)" class="myimg2"></image>  -->
        </view>
		<avatar @upload="_uploadImg" @avtinit="doBefore" quality="1" ref="avatar"></avatar>
	</view>
</template>

<script>
    import { saveUserInfo } from '@/pages/user/interface.js'
    import { http,user } from '@/common/framework'
    import config from '@/common/config';
	import avatar from "@/components/other-com/yq-avatar/yq-avatar.vue";
	export default {
		data() {
			return {
                urls: [],
                userid:''
			}
        },
        mounted() {
            this.clk(0);
        },
        /**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function (options) {
            // setTimeout(()=>{
                this.userid = options.userid;
                this.urls[0] = options.headImg;

            // },300)
        },
		methods: {
			doBefore() {
				console.log('doBefore');
			},
			clk(index) {
				this.$refs.avatar.fChooseImg(index,{
					selWidth: '350upx', selHeight: '350upx', 
					expWidth: '260upx', expHeight: '260upx',
					inner: index ? 'true' : 'false'
				});
			},
			doUpload(rsp) {
				console.log(rsp);
				this.$set(this.urls, rsp.index, rsp.path);
				return;
				uni.uploadFile({
					url: '', //仅为示例，非真实的接口地址
					filePath: rsp.path,
					name: 'avatar',
					formData: {
						'avatar': rsp.path
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data);
					},
					complete(res) {
						console.log(res)
					}
				});
            },

             //图片上存
           async _uploadImg(rsp){
               let _this = this;
               _this.$set(_this.urls, rsp.index, rsp.path);
               let path = rsp.path;
               console.log(JSON.stringify(path));
               uni.showLoading({
                    title: '上传中...'+_this.progress +'%'
                });
               let parpms = {
                   url:config.webApiUrl+'/kmlc/sys/common/upload',
                   file:path,
                   name:'file',
                   data:{
                       file:path
                   },
                   onSuccess:function(Res){
                    //    console.log('onSuccess:',Res);
                    //    console.log('onSuccess:',typeof Res);
						Res =typeof Res=='string'?JSON.parse(Res):Res;
                       
                       if(Res && Res.success){
                          
                            _this.saveUserHead(Res.message);
                        }else{
                            uni.showToast({
                                icon:'none',
                                title:Res.message ||'保存失败~！',
                            })
                        }
                       
                   },
                   onFail:function(res){
                       console.log('onFail:',JSON.stringify(res));
                       uni.showToast({
                            icon:'none',
                            title:res.message ||'保存失败~！',
                       })
                   },
                   onProgressUpdate:function(res){
                    //    console.log('onProgressUpdate:',JSON.stringify(res));
                        _this.progress = res.progress;
                   },
               };
               console.log(JSON.stringify(parpms));
               http.upload(parpms);
            
            },//修改的头像保存到用户信息
            async saveUserHead(path){
                let params ={
                    id:this.userid,
                    avatar:path
                }
                let Res = await saveUserInfo(params);
              
                if(Res && Res.success){
                    uni.hideLoading();
                    let _user = user.getUserInfo();
                    _user.headerImg = config.webApiUrl+'/kmlc/'+path;
                    user.setUserInfo(_user);
                    uni.$emit('reloadUser');
                    setTimeout(()=>{
                        uni.navigateBack();
                    },200)
                    
                }else{
                    uni.showToast({
                        icon:'none',
                        title:Res.message ||'保存失败~！',
                    })
                }
            },
		},
		components: {
			avatar
		}
	}
</script>

<style>
	.myimg {
		width: 200upx;
		height: 200upx;
		border-radius: 0 !important;
		margin: 40px;
	}
	.myimg2 {
		width: 350upx;
		height: 350upx;
		border-radius: 100%;
		margin: 40px;
	}
</style>
